<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>朋友圈</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../css/aui.2.0.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/alert.css">
    <link rel="stylesheet" href="../css/friends.css">
</head>
<body>
<section>
    <header class="aui-bar aui-bar-nav" id="aui-header">
        <div class="aui-col-xs-3 my-col-xs-3">
            <i class="aui-iconfont aui-icon-left"></i>
        </div>
        <div class="aui-title my-aui-title">朋友圈</div>
    </header>
    <section class="friends-box">
        <ul class="friends-box-content" id="friends-box">
            <script type="text/x-handlebars-template" id="friends-box-template">
                {{#each product}}
                <li id="product-id" data-id="{{id}}">
                    <!--朋友圈具体内容-->
 					 <div class="friends-box-detail-tx"><img src="{{headImg}}" alt=""></div>
                    <div class="friends-box-detail">
                        <h3 class="friends-detail-user">{{name}}</h3>
                        <!--<p class="friends-detail-text1">#周末福利#</p>-->
                        <span class="friends-detail-text2">{{word}}</span>
                        <ul class="friends-box-detail-ul">
                            {{#each urls}}
                            <li><img src="{{this}}" alt=""></li>
                            {{/each}}
                        </ul>
                        <div class="friends-detail-bottom"><span>一键发朋友圈</span></div>
                        <!--用户头像-->
                      

                    </div>
                </li>
                {{/each}}
            </script>
            <!--<li>
                &lt;!&ndash;建议&ndash;&gt;
                &lt;!&ndash;<section class="friends-box-proposal">
                    <div class="friends-timer"></div>
                    <span>建议下午3-7点发</span>
                </section>&ndash;&gt;

                &lt;!&ndash;朋友圈具体内容&ndash;&gt;
                <div class="friends-box-detail">
                    <h3 class="friends-detail-user">小一</h3>
                    <p class="friends-detail-text1">#周末福利#</p>
                    <span class="friends-detail-text2">纳尼？水果，果汁，零食，这么便宜?</span>
                    <ul class="friends-box-detail-ul">
                        <li><img src="../images/22.jpg" alt=""></li>
                        <li><img src="../images/22.jpg" alt=""></li>
                        <li><img src="../images/22.jpg" alt=""></li>
                        <li><img src="../images/22.jpg" alt=""></li>
                        <li><img src="../images/22.jpg" alt=""></li>
                        <li><img src="../images/22.jpg" alt=""></li>
                        <li><img src="../images/22.jpg" alt=""></li>
                        <li><img src="../images/22.jpg" alt=""></li>
                        <li><img src="../images/22.jpg" alt=""></li>
                        <div class="friends-detail-bottom"><span>一键发朋友圈</span></div>
                    </ul>
                    &lt;!&ndash;用户头像&ndash;&gt;
                    <div class="friends-box-detail-tx"><img src="../images/tx.png" alt=""></div>

                </div>
            </li>-->

        </ul>
    </section>
    <div class="loading">加载更多...</div>
    <div class="no-info">没有更多信息了...</div>
    <!--分享到朋友圈的层-->
    <div class="friends-share">
        <div class="friends-share-item">
            <div class="friendsshare-item-title">
                <span class="return">返回</span>
                <span>分享到朋友圈</span>
                <span>发送</span>
            </div>
            <div class="friendsshare-item-con"><textarea class="friendsshare-con-textarea" rows="10" cols="30">1当日，记者在现场看到，这朵神秘巨型蘑菇大小堪比簸箕，呈不规则形，分成了高低不同的几层“平台”，好似由几朵蘑菇组成，实则连成一体。蘑菇正面看上去类似木纹呈土褐色，背面则由很多细小的褶皱构成，富含水分。2蘑菇正面看上去类似木纹呈土褐色，背面则由很多细小的褶皱构成，富含水分。3蘑菇正面看上去类似木纹呈土褐色，背面则由很多细小的褶皱构成，富含水分。</textarea>
                <div class="friendsshare-con-img">
                    <img src="../images/22.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</section>
<script src="../js/jquery-3.0.0.min.js"></script>
<script src="../js/handlebars-v4.0.10.js"></script>
<script src="../js/config.js"></script>
<script src="../js/function.js"></script>
<script src="../js/alert.js"></script>

<script src="../js/common.js"></script>
<script>

    var range = 200, //距下边界长度/单位px
        maxnum = 0, //设置总数
        num = 0, //当前数量
        totalheight = 0,
        flag = 0,
        start = '0',
        pageLength ='3';

    getFriendsQuanShare();

    var friendsTpl=$('#friends-box-template').html();
    var friendCmp=Handlebars.compile(friendsTpl);



    $(window).on('scroll',function () {

        var scrollPos= $(window).scrollTop(); //滚动条距顶部距离
        totalheight=parseFloat($(window).height())+parseFloat(scrollPos);

        if (num>maxnum){
            return false;
        }
        if (($(document).height() - range) <= totalheight && num < maxnum){
            getFriendsQuanShare();
        }
    });

    function getFriendsQuanShare() {
        if (flag){
            return;
        }
        //条件成立
        //显示加载更多
        $(".no-info").hide();
        $('.loading').show();
        flag = 1;

        $.ajax({
            url:C.marketInterface.friendBatch,
            type:'get',
            dataType:'json',
            data:{
                token:C.marketToken,
                start:start,
                length:pageLength
            },
            success:function (response) {
                if(response.result=='success'){
                    $('.loading').hide();
                    num++;
                    var data=response.data;
                    maxnum=data['totalCount'];
                    start=num * pageLength;
                    if (maxnum==0){
                        $('.no-info').show();

                    }
                    if (data.product.length>0){
                        $('#friends-box').append(friendCmp(data));
                    }else {
                        $('.no-info').show();
                        num=maxnum + 1;
                    }
                    flag=0;


                    $('.friends-detail-bottom').unbind().bind('click',function () {
                        //$('.friends-share').toggle();
                        //alert('aaa');

                        var shareInfo=[];

                        var imgUrls=$(this).siblings('.friends-box-detail-ul').find('li');

                        var shareId=$(this).parents('#product-id').data('id');
                        imgUrls.each(function () {
                            var imgUrl=($(this).find('img').attr('src'));
                            shareInfo.push(imgUrl);
                        });
                        //console.log(shareInfo);
                        var shareText=$(this).siblings('.friends-detail-text2').html();


                        var shareQuan={
                            postType:'shareFriendQuan',
                            shareImgInfo:shareInfo,
                            shareText:shareText,
                            shareId:shareId
                        };

                        var ua = navigator.userAgent.toLowerCase();
                        if (/iphone|ipad|ipod/.test(ua)) {

                            //console.log(shareQuan);
                            iosShareQuan(shareQuan);
                            event.stopPropagation();
                        } else {
                            //console.log(JSON.stringify(data));
                            androidShareQuan(JSON.stringify(shareQuan));
                            event.stopPropagation();
                        }



                    });

                    /*$('.return').unbind().bind('click',function () {
                        $('.friends-share').toggle();
                    });*/



                }else if (response.result=='login'){
                	dialog.tusiError('登入过期，请重新登入！');
                    againLogin();
                }else {
                	dialog.tusiError(response.errorMsg);
                }
            },
            error:function () {
                //alert('服务器异常');
            }
        })
    }


    //拉取安卓分享到朋友圈
    function androidShareQuan(param) {
        window.huifa.shareFriendQuan(param);
    }
    //拉取iOS分享到朋友圈
    function iosShareQuan(param) {
        window.webkit.messageHandlers.shareFriendQuan.postMessage(param);
    }



</script>
</body>
</html>